<template>
  <div class="flex-column-center" style="margin-top: 100px;">
    <table class="notice-table">
      <tr>
        <td>考生姓名</td>
        <td>{{data.username}}</td>
      </tr>
      <tr>
        <td>电话</td>
        <td>{{data.userphone}}</td>
      </tr>
      <tr>
        <td>身份证号</td>
        <td>{{data.idnumber}}</td>
      </tr>
      <tr>
        <td>考试名称</td>
        <td>{{data.usertest ? data.usertest.testtitle : ''}}</td>
      </tr>
      <tr>
        <td>考试时间</td>
        <td v-if="data.usertest && data.usertest.teststartdate">{{data.usertest ? data.usertest.teststartdate : ''}} 至
          {{data.usertest ? data.usertest.testenddate : ''}}&nbsp;&nbsp;&nbsp;
          ({{data.usertest ? data.usertest.testtimelong : ''}}分钟)</td>
        <td v-else>{{data.usertest ? data.usertest.testtimelong : ''}}分钟</td>
      </tr>
      <tr>
        <td>考试规定</td>
        <td>{{data.usertest ? data.usertest.testinfomation : ''}}</td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center;">
          <!-- <Button type="primary" size="large" @click="startExam" >
            开&nbsp;&nbsp;&nbsp;始&nbsp;&nbsp;&nbsp;答&nbsp;&nbsp;&nbsp;题
          </Button> -->
          <Button type="primary" :loading="loading" @click="startExam">
              <span v-if="!loading">开&nbsp;&nbsp;&nbsp;始&nbsp;&nbsp;&nbsp;答&nbsp;&nbsp;&nbsp;题</span>
              <span v-else>获取考题中，请稍等</span>
          </Button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'exam-notice',
    mounted () {
      // this.getTest()
    },
    data () {
      return {
        data: {},
        loading: false
      }
    },
    methods: {
      startExam () {
        this.$router.push({
            name: 'paper-answer',
            params: this.data
        });
      },
      getTest () {
        this.loading = true
        axios.post('rs/logic/testdailinfo', {data: {testid: this.data.testid}}).then(res => {
          // this.data.tests = [...this.$shuffle(res.data.oneques), ...this.$shuffle(res.data.douques), ...this.$shuffle(res.data.judques)]
            this.data.tests = [this.$shuffle(res.data.oneques), this.$shuffle(res.data.douques), this.$shuffle(res.data.judques)]
          this.loading = false
        }).catch( () => {
          this.$Modal.error({
              title: '错误',
              content: '获取试题错误，无法进入考试'
          });
        })
      },
      getTesttwo () {
        this.loading = true
        this.data.usertest.userid = this.data.userid,
        axios.post('rs/logic/randommodeltestqu', {data: this.data.usertest}).then(res => {
          // console.log('res------>', res);
          this.data.modeltestid = res.data.modeltestid;
          // this.data.tests = [...this.$shuffle(res.data.oneques), ...this.$shuffle(res.data.douques), ...this.$shuffle(res.data.judques)]
            this.data.tests = [this.$shuffle(res.data.oneques), this.$shuffle(res.data.douques), this.$shuffle(res.data.judques)]
          this.loading = false
        }).catch( () => {
          this.$Modal.error({
              title: '错误',
              content: '获取试题错误，无法进入考试'
          });
        })
      },

    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.data = to.params
        if (to.params.testid) {
          vm.getTest()
        } else {
          vm.getTesttwo()
        }
      })
    }
};
</script>
<style lang="less">
.notice-table {
  width: 800px;
  font-size: 18px;
  border: 2px solid #000;
  font-weight: bold;
  padding: 20px;
   border-collapse:collapse;
}
.notice-table td {
   border: 1px solid #000;
   padding: 15px;
}
.notice-table tr > td:first-of-type {
  width:150px;
  text-align: center;
}
  /* .student-info {
    margin: 100px auto;
    width: 600px
  }
  .exam-info {
    margin: 50px auto;
    width: 600px
  }
  .exam-note {
    margin: 20px auto;
    width: 600px
  } */
</style>
